<template>
  <PageView>
    <x-card>
      <div slot="content" class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item label="项目名称">
                <a-select v-model="queryParam.project" allow-clear placeholder="请选择项目名称">
                  <a-select-option v-for="item in projectList" :key="item.name" :value="item.id">{{ item.name
                    }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="操作人">
                <a-select v-model="queryParam.owner" allow-clear placeholder="请选择操作人">
                  <a-select-option v-for="item in ownerList" :key="item" :value="item">{{ item
                    }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="日期">
                <a-date-picker
                  style="width:100%"
                  @change="choiceDate">
                </a-date-picker>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
              <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </x-card>
    <a-card :bordered="false">
      <s-table
        ref="table"
        :columns="columns"
        :data="loadData"
        :alert="true"
        :rowKey="(record) => record.id"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      >
        <template slot="operator">
          <a-row>
            <a-col :md="12" :sm="24">
              <a-button @click="$refs.Form.open()" icon="plus" type="primary" v-if="hasPerm('task:add')">新增排期
              </a-button>
            </a-col>
            <a-col :md="12" :sm="24">
              <div class="table-title-right">
                <a-radio-group v-model="queryParam.status" @change="$refs.table.refresh(true)">
                  <a-radio-button value="0">
                    <span>{{`待完成任务(${task.undo})`}}</span>
                  </a-radio-button>
                  <a-radio-button value="1">
                    <span>{{`已完成任务(${task.do})`}}</span>
                  </a-radio-button>
                </a-radio-group>
              </div>
            </a-col>
          </a-row>
        </template>
        <span slot="date" slot-scope="text,record">
          {{ text }}【{{record.week}}】
        </span>

        <span slot="project" slot-scope="text,record">
              {{ record.channel_name }} | {{record.project_name}}
        </span>

        <span slot="taskTitle" slot-scope="text,record">
          【{{ record.type }}】{{record.title}}
        </span>

        <span slot="action" slot-scope="text, record">
          <span v-show="record.status === 0">
            <a v-if="hasPerm('task:change')" @click="gameTaskDelete(record.id,1)">已完成</a>
          </span>
          <span v-show="record.status === 1">
            <a v-if="hasPerm('task:change')" @click="gameTaskDelete(record.id,0)">还原</a>
          </span>
          <a-divider type="vertical"
                     v-if="hasPerm('task:change') & (hasPerm('task:detail') ||hasPerm('task:edit') || hasPerm('task:clone') || hasPerm('task:delete'))"/>
            <a v-if="hasPerm('task:detail')" @click="$refs.Detail.open(record)">详情</a>
          <a-divider type="vertical"
                     v-if="hasPerm('task:detail') & (hasPerm('task:edit') || hasPerm('task:clone') || hasPerm('task:delete'))"/>
          <a-dropdown v-if="hasPerm('task:edit') || hasPerm('task:clone') || hasPerm('task:delete')">
            <a class="ant-dropdown-link">
              更多 <a-icon type="down"/>
            </a>
            <a-menu slot="overlay">
              <a-menu-item v-if="hasPerm('task:edit')">
                            <a v-if="hasPerm('task:edit')" @click="$refs.Form.open(record)">编辑</a>
              </a-menu-item>
              <a-menu-item v-if="hasPerm('task:clone')">
                <a v-if="hasPerm('task:clone')" @click="$refs.Form.open(record,true)">克隆任务</a>
              </a-menu-item>
              <a-menu-item v-if="hasPerm('task:delete')">
            <a-popconfirm v-if="hasPerm('task:delete')" placement="topRight" title="确认删除？"
                          @confirm="() => gameTaskDelete(record.id,3)">
                              <a>删除</a>
                            </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
          </span>

      </s-table>
      <s-form ref="Form" @ok="handleOk"/>
      <detail ref="Detail"></detail>
    </a-card>
  </PageView>
</template>
<script>
  import { PageView } from '@/layouts'
  import { STable, XCard } from '@/components'
  import sForm from './Form'
  import detail from './detail'
  import { getProjectTree } from '@/api/main/project'
  import * as api from '@/api/system/task'
  import moment from 'moment'

  export default {
    components: {
      PageView,
      XCard,
      STable,
      sForm,
      detail
    },
    data() {
      return {
        // 查询参数
        queryParam: {
          status: '0'
        },
        task: {},
        // 表头
        columns: [
          {
            title: '操作日期',
            dataIndex: 'date',
            scopedSlots: { customRender: 'date' }
          },
          {
            title: '操作时间',
            dataIndex: 'time'
          },
          {
            title: '项目渠道',
            dataIndex: 'project',
            scopedSlots: { customRender: 'project' }
          },

          {
            title: '标题',
            dataIndex: 'taskTitle',
            scopedSlots: { customRender: 'taskTitle' }
          },
          {
            title: '操作版本',
            dataIndex: 'version'
          },
          {
            title: '操作人',
            dataIndex: 'owner'
          }
        ],
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          if (!this.queryParam.status) {
            this.queryParam.status = '0'
          }
          return api.getPage(Object.assign(parameter, this.queryParam)).then((res) => {
            return res.data
          })
        },
        projectList: [],
        ownerList: [],
        selectedRowKeys: [],
        selectedRows: [],
        defaultExpandedKeys: []
      }
    },
    created() {
      if (this.hasPerm('task:change') || this.hasPerm('task:delete') || this.hasPerm('task:edit')) {
        this.columns.push({
          title: '操作',
          width: '150',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        })
      }
      this.getTaskNum()
      getProjectList().then(res => {
        this.projectList = res.data
      })
      /**
       * 获取操作人list
       */
      api.getOwnerList().then(res => {
        if (res.success) {
          this.ownerList = res.data
        }
      })
    },
    methods: {
      handleOk() {
        this.getTaskNum()
        this.$refs.table.refresh()
      },
      choiceDate(value) {
        if (value) {
          this.queryParam.date = moment(value).format('YYYY-MM-DD')
        }
      },
      /**
       * 获取排期任务条数
       */
      getTaskNum() {
        api.getTaskNum().then(res => {
          this.task = res.data
        })
      },
      /**
       * 删除排期任务
       */
      gameTaskDelete(id, type) {
        api.deleteObj(id).then((res) => {
          if (res.success) {
            this.$message.success('操作成功')
            this.$refs.table.refresh(true)
            this.getTaskNum()
          } else {
            this.$message.error('操作失败：' + res.message)
          }
        })
      },
      toggleAdvanced() {
        this.advanced = !this.advanced
      },
      onSelectChange(selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      }
    }
  }
</script>
<style lang="less">
  button {
    margin-right: 8px;
  }

  .table-title-right {
    float: right;
    margin-right: 30px;
  }
</style>
